{% extends 'article/base.html' %}
{% block title %}article detail{% endblock %}
{% load static %}
{% block content %}
    <div>
    <header>
        <h1>{{ article.title }}</h1>
        <p>{{ article.author }}</p>
    </header>
        <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}"/>
    <div id="editormd-view">
        <label for="append-test"></label><textarea id="append-test" style="display: none;">
            {{ article.body }}
        </textarea>
    </div>
    </div>
    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'editor/lib/marked.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'editor/lib/prettify.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'editor/lib/raphael.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'editor/lib/underscore.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'editor/lib/sequence-diagram.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'editor/lib/flowchart.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'editor/lib/jquery.flowchart.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'editor/editormd.js' %}"></script>

    <script type="text/javascript">
    $(function () {
        editormd.markdownToHTML("editormd-view", {
            htmlDecode: "style,script,iframe",
            emoji : true,
            taskList: true,
            tex: true,
            flowChart: true,
            sequenceDiagram: true,
        });
    });
    </script>
{% endblock %}